<template>
    <div>
        <div class="top-banner-back">
            <div>
                当前校区：
                <el-select placeholder="请选择" class="width240" v-model="schoolId" @change="findShopsListChange">
                    <el-option v-for="(item,index) in findShopsList" :key="index" :label="item.schoolName" :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="martop15">
                <el-button type="primary" @click="openLayer(0)">添加</el-button>
            </div>
        </div>
        <div class="edu-table-lr">
            <el-table :data="tableData"  ref="multipleTable"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="85"></el-table-column>
                <el-table-column prop="sort" label="排序"></el-table-column>
                <el-table-column prop="classroomName" label="教室名称"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" @click="openLayer(1,scope.row.id)">编辑</el-button> 
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="edu-pagination flex">
            <div v-if="tableData.length > 0">
                <el-button size="small" @click="toggleSelection(tableData)">全选</el-button>
                <el-button size="small" @click="toggleSelection()">取消选择</el-button>
                <el-button size="small" @click="toggleSelectionMultiple">批量删除</el-button>
            </div>
            <div class="flex-1"> 
                <el-pagination background  v-if="pageCount>1" 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="pageCount*10">
                </el-pagination>
            </div>
             
        </div>

        <!-- 新增教室 编辑教室弹出层 -->
        <el-dialog title="新增教室" :visible.sync="dialogFormVisible" class="width580" :before-close="cancelLayer">
            <el-form :model="form" :rules="rules" ref="form" :label-width="formLabelWidth">
                <el-form-item label="教室名称：" prop="classroomName" required>
                    <el-input v-model="form.classroomName" class="width240" placeholder="请输入教室名称"></el-input>
                </el-form-item>
                <el-form-item label="排序：" prop="sort" required>
                    <el-input v-model.number="form.sort" class="width240"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelLayer(0,'form')">取 消</el-button>
                <el-button type="primary" @click="dialogFormSubmit('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import common from '@/assets/js/common'
export default {
    data(){
        var checkSort = (rule, value, callback)=>{
            if(Number.isInteger(value)){
                callback();
            }else{
                return callback(new Error('请输入0~99以内的数字，数字越小越靠前'));
            }
        }
        return{
            tableData:[],
            currentPage:1,
            findShopsList:[],
            schoolId:'',
            pageSize:10,
            pageCount:1,
            curpage:1,
            dialogFormVisible: false,
            formLabelWidth:'100px',
            form:{},
            rules:{
                classroomName:[
                    { required: true, message: '请填写教室名称'},
                ],
                sort:[
                    { required: true, message: '请输入0~99以内的数字，数字越小越靠前'},
                    { min: 0, max: 99, type:'number', message: '请输入0~99以内的数字，数字越小越靠前'},
                    { validator: checkSort }
                ]
            },
            classroomId:''
        }
    },
    methods:{
        //分页查询教室数据
        loadData(curpage,schoolId){
            let that = this
            common.ajax({
                'url':eduAPI.activeAPI.findClassroomList,
                'type': "GET",
                'data':{
                    curPage: curpage,
                    schoolId: schoolId
                },
                'success': function(data) {
                    console.log(data,'分页查询数据');
                    if (data.data) {
                        that.tableData = data.data.subList
                        that.pageSize = data.data.pageSize
                        that.pageCount = data.data.pageCount
                    }else{
                        that.tableData = []
                    }
                }
            });
        },
        //改变校区
        findShopsListChange(val){
            let that = this
            that.schoolId = val
            that.loadData(1,val)
        },
        //新增 编辑详情
        openLayer(type,classroomId){
            let that = this
            that.classroomId = ''
            that.dialogFormVisible = true
            parent.window.postMessage("openMask()", "*");
            if(classroomId){
                that.classroomId = classroomId
            }
            console.log('that.classroomId',that.classroomId)
            if(type == 1){
                // type==1 为编辑   type==0 新增
                common.ajax({
                    'url':eduAPI.activeAPI.findClassroom,
                    'type': "GET",
                    'data':{classroomId:classroomId},
                    'success': function(data) {
                        console.log(data,'查询教室详情');
                        that.form = data.data
                    }
                });
            }
        },
        //新增 编辑 取消按钮
        cancelLayer(num,formName){
            if(num==0){
                this.$refs[formName].resetFields();
            }
            this.dialogFormVisible = false
            parent.window.postMessage("closeMask()", "*");
        },
        //新增 编辑  确定按钮
        dialogFormSubmit(formName){
            let that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    let json = {}
                    let message = ''
                    if(that.classroomId)
                    { 
                        message = '修改'
                    } else{
                        message = '新增'
                    }
                    json['id'] = that.classroomId
                    json['classroomName'] = that.form.classroomName
                    json['sort'] = that.form.sort
                    json['schoolId'] = that.schoolId
                    console.log('json',json)
                    common.ajax({
                        'url': eduAPI.activeAPI.saveClassroom,
                        'type': "POST",
                        'data':json,
                        'success': function(data) {
                            console.log(data,'保存教室数据');
                            that.$message({
                                showClose: true,
                                type: "success",
                                message: message + '成功'
                            });
                            that.loadData(that.curpage,that.schoolId)
                            that.cancelLayer('form')
                            that.dialogFormVisible = false
                            parent.window.postMessage("closeMask()", "*");
                        },
                        'warning':function(data){
                            that.$message({
                                showClose: true,
                                type: "success",
                                message: message + '异常'
                            });
                            that.cancelLayer('form')
                            that.dialogFormVisible = false
                            parent.window.postMessage("closeMask()", "*");
                        },
                        'error':function(data){
                            that.$message({
                                showClose: true,
                                type: "success",
                                message: message + '错误'
                            });
                            that.cancelLayer('form')
                            that.dialogFormVisible = false
                            parent.window.postMessage("closeMask()", "*");
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //全选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        toggleSelection(rows){
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //批量删除
        toggleSelectionMultiple(){
            let that = this,length
            let memberIds = ''
            if(that.multipleSelection){
                length = this.multipleSelection.length
            }else{
                length = 0
            }
            if(length == 0){
                that.$message({
                    showClose: true,
                    message: '请选择要删除的教室',
                    type: 'warning'
                });
                return
            }
            for(let i = 0; i < length ; i++){
                memberIds += that.multipleSelection[i].id+",";
            }
            memberIds = memberIds.substring(0, memberIds.length - 1);
            that.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                common.ajax({
                    'url': eduAPI.activeAPI.delClassrooom,
                    'type': "POST",
                    'data':{
                        classroomIds: memberIds,
                        schoolId: that.schoolId
                    },
                    'success': function(data) {
                        console.log(data,'批量删除数据');
                        that.$message({
                        showClose: true,
                        message: '批量删除成功',
                        type: 'success'
                    });
                    that.loadData(that.curpage,that.schoolId)
                    }
                });
            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
            console.log(memberIds,'memberIds')
        },
        //分页方法
        handleSizeChange(val){
        },
        handleCurrentChange(val){
            this.curpage = val
            console.log(val,'====',this.schoolId)
            this.loadData(val,this.schoolId)
        }
    },
    beforeMount(){    
        let that = this
        //查询校区
        common.ajax({
            'url': eduAPI.activeAPI.findAllSchoolList,
            'type': "GET",
            'success': function(data) {
                console.log(data,'查询校区数据');
                if (data.data) {
                    that.findShopsList = data.data
                    that.schoolId = data.data[0].id
                    that.loadData(that.curpage,that.schoolId)
                }
            }
        });
    },

}
</script>
